import type { FC } from 'react'
import Left from '@/components/left.tsx'
import Right from '@/components/right.tsx'
import { useAppSelector } from '@/store/hooks.ts'
import { selectColor } from '@/store/colorSlice.ts'
import styles from '@/App.module.less'

const App: FC = () => {
  const color = useAppSelector(selectColor)

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Counter 计数器案例</h1>
      <hr />

      <div className={styles.boxPanel} style={{ backgroundColor: color, paddingBottom: 30 }}>
        <Left />
        <Right />
      </div>
    </div>
  )
}

export default App
